<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { linkTo } from '@/Utils';
  import { Links } from '@/Types';
  const props = defineProps({
    defaultProps: { type: Object, default: () => {} }
  });
  const links = ref<Links[]>(props.defaultProps.links);
  const onClick = (url) => {
    linkTo(url);
  };
  onMounted(() => {
    console.log(Dcat);
  });
</script>

<template>
  <div class="container-fluid app-links">
    <div class="flex-lg-row">
      <template v-for="(item, index) in links" :key="index">
        <div class="d-inline-flex">
          <div class="w-100 item">
            <div class="info-box mb-1 mx-1" @click="onClick(item.url)">
              <span class="info-box-icon elevation-2" :class="item.color">
                <i :class="item.icon" />
              </span>
            </div>
            <span class="fs-6 d-inline-block w-100 text-center">{{ item.title }}</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .app-links {
    .item {
      .info-box {
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
</style>
